import React,{useEffect, useState} from 'react';
const Index = () => {
    const [msg,setMsg] =useState("")
    // 设置复杂数据类型
    const [arr,setArr] =useState([])
    const handleChange=(event)=>{
        console.log(event.target.value);
        setMsg(event.target.value)
        localStorage.setItem("arr",JSON.stringify(arr))
    }
    const handleEnter=(event)=>{
        if(event.keyCode ==13){
            setArr(()=>{
                arr.push(msg);
                localStorage.setItem("arr",JSON.stringify(arr))
                return [...arr]
            })
            setMsg("")
        }
       
    }
  const handleDetail=(item)=>{
       setArr(()=>{
           const index =arr.indexOf(item)
           arr.splice(index,1)
           localStorage.setItem("arr",JSON.stringify(arr))
           return [...arr]
       })
    }
    useEffect(()=>{
       
        setArr(()=>{
            var count = localStorage.getItem("arr")
            console.log(JSON.parse(count));
            return [...JSON.parse(count)]
        })
    },[])
    return (
        <div>
            <h2>todolist</h2>
            <input type="text" value={msg} 
             onChange={handleChange}
             onKeyUp={handleEnter}
             />
             <h1>未完成</h1>
             <div>
                 {arr.map(item=>{
                     return (<div key={item}  onClick={()=>handleDetail(item)}>
                         <input type="checkbox" />
                         {item}
                         <button>删除</button>
                         </div>)
                 })}
             </div>
             <h1>已完成</h1>
        </div>
    );
}

export default Index;
